<template>
    <header data-tauri-drag-region>
        <div class="left__title" @click="router.push('/')">{{ $t('app.title') }}</div>
        <div class="right__operation">
            <Updater />
            <n-popselect trigger="click" :options="langOptions" v-model:value="lang" @update:value="handleLangChange">
                <div class="line_icon">
                    <n-icon :size="18" color="#fff">
                        <LanguageSharp />
                    </n-icon>
                    {{ lang === 'en' ? '英文' : '中文' }}
                </div>
            </n-popselect>
            <n-popselect trigger="click" :options="themeOptions" v-model:value="theme"
                @update:value="handleThemeChange">
                <div class="line_icon" ref="switchRef">
                    <n-icon :size="18" color="#fff">
                        <ColorPaletteOutline />
                    </n-icon>
                    {{ theme === 'dark' ? '黑夜主题' : '白昼主题' }}
                </div>
            </n-popselect>
            <div class="icon_item" @click="handleControlWins('minimize')">
                <n-icon :size="18" color="#fff">
                    <RemoveSharp />
                </n-icon>
            </div>
            <div class="icon_item" @click="handleControlWins('close')">
                <n-icon :size="18" color="#fff">
                    <Close />
                </n-icon>
            </div>
        </div>
    </header>
</template>

<script setup lang='ts'>
import { useAppStore } from '@/stores/app';
import { controlWindow } from '../utils/window';
import { Close, RemoveSharp, ColorPaletteOutline, LanguageSharp } from '@vicons/ionicons5';
import { storeToRefs } from 'pinia';
import { useI18n } from "vue-i18n";
import { NPopselect } from 'naive-ui';
import Updater from './Updater.vue';
const i18n = useI18n();
const router = useRouter();
const appStore = useAppStore();
const handleControlWins = (type: 'hide' | 'show' | 'fullscreen' | 'minimize' | 'close' | 'resize') => {
    controlWindow('bp-backend', type);
}
const { theme, lang } = storeToRefs(appStore);
const switchRef = ref<HTMLElement | null>(null);

type LangOptionKeys = typeof langOptions[number]['value'];
type ThemeOptionsKeys = typeof themeOptions[number]['value'];
const handleLangChange = (type: LangOptionKeys) => {
    i18n.locale.value = type;
};
const handleThemeChange = (e: ThemeOptionsKeys) => {
    if (!switchRef.value) return;
    // 获取原生 DOM 元素
    const el = switchRef.value;
    // 获取位置信息
    const rect = el.getBoundingClientRect()
    const transition = document.startViewTransition(async () => {
        document.documentElement.dataset.theme = e;
        await nextTick()
    })
    const x = rect.left;
    const y = rect.top;
    const endRadius = Math.hypot(
        Math.max(x, innerWidth - x),
        Math.max(y, innerHeight - y),
    )
    transition.ready
        .then(() => {
            const clipPath = [
                `circle(0px at ${x}px ${y}px)`,
                `circle(${endRadius}px at ${x}px ${y}px)`,
            ]
            document.documentElement.animate(
                {
                    clipPath: theme.value === 'light'
                        ? [...clipPath].reverse()
                        : clipPath,
                },
                {
                    duration: 450,
                    easing: 'ease-out',
                    pseudoElement: theme.value === 'light'
                        ? '::view-transition-old(root)'
                        : '::view-transition-new(root)',
                },
            )
        })
}
const langOptions = [
    {
        label: '英文',
        value: 'en'
    },
    {
        label: '中文',
        value: 'zhCn'
    }
]
const themeOptions = [
    {
        label: '黑夜主题',
        value: 'dark'
    },
    {
        label: '白昼主题',
        value: 'light'
    }
]
</script>
<style scoped lang='scss'>
@use "sass:color";

header {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include useTheme {
        background: getVar('titleBarBg');
    }

    .left__title {
        color: #fff;
        margin-left: 0.5em;
        font-size: 0.8em;
    }

    .right__operation {
        height: 100%;
        display: flex;
        align-items: center;

        .icon_item {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                @include useTheme {
                    background: color.adjust(getVar('titleBarBg'), $lightness: 15%);
                }
            }
        }

        // 主体 中英文切换
        .line_icon {
            height: 100%;
            padding: 0 1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5em;
            color: #fff;
            font-size: 0.8em;

            &:hover {
                @include useTheme {
                    background: color.adjust(getVar('titleBarBg'), $lightness: 15%);
                }
            }
        }
    }
}
</style>